<div class="page-wrapper d-flex flex-column pt-4 w-100">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Modules's Posts
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card card-body">
                    <a href="{{createUrl}}" class="btn btn-primary mb-2">
                        <i class="fas fa-plus"></i> Create new post
                    </a>
                    <a data-bs-toggle="modal" data-bs-target="#modal-nav-posts-{{moduleId}}"
                        class="btn btn-primary mb-2">
                        <i class="fas fa-search"></i> Link current post
                    </a>
                    <a href="/portal/module/details/{{moduleId}}" class="btn btn-primary mb-3">
                        <i class="fas fa-pen"></i> Edit module
                    </a>
                    <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">

            <div class="row">

                <modal-nav-posts save="saveOthers()" src-column="'moduleId'" src-id="moduleId" selected="others"
                    query="'not_module_id='"></modal-nav-posts>
            </div>

            <!-- <section class="content container-fluid"> -->
            <div class="card">
                <div class="card-body">
                    <table id="list-page" class="table table-hover sortable" cellspacing="0" ng-init="init()">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col" style="width: 3%">
                                    <!-- <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small> -->
                                </th>
                                <th scope="col" style="width: 4%">
                                    <!-- <span class="fa fa-grip-vertical fa-xs text-black-50-numeric-down"></span> -->
                                </th>
                                <th scope="col" style="width: 25%">Title</th>
                                <th scope="col" width="10%">Image</th>
                                <th scope="col" width="10%">Created Date</th>
                                <th scope="col" style="width: 10%">Author</th>

                                <th scope="col" style="width: 5%"></th>
                            </tr>
                        </thead>

                        <tbody class="sortable" dnd-list="data.items">
                            <!-- <tr ng-if="canDrag">
                    <td colspan="7"><small class="text-info"
                            ng-bind="translate('warning_can_not_drag_drop',true, '(Drag & Drop feature only active when priority is asc)')"></small>
                    </td>
                </tr> -->
                            <tr ng-repeat="item in data.items" dnd-draggable="item" dnd-effect-allowed="move"
                                dnd-selected="selected = item" dnd-moved="updateInfos($index)"
                                ng-class="{'selected': selected === item}">
                                <td style="cursor: grab" class="drag-header">
                                    <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small>
                                </td>
                                <td>
                                    <input type="text" value="{{item.priority}}"
                                        class="item-priority form-control form-control-sm d-inline"
                                        style="width: 40px" />
                                </td>
                                <td>
                                    <small>
                                        <span ng-bind-html="item.post.title"></span>
                                    </small>
                                </td>
                                <td>
                                    <div ng-if="item.post.image!=''">
                                        <preview-image img-height="50" img-src="item.post.imageUrl"></preview-image>
                                    </div>
                                </td>
                                <td>
                                    <small>
                                        {{item.post.createdDateTime | utcToLocal:'dd.MM.yy hh:mm a'}}
                                    </small>
                                </td>
                                <td>{{item.post.createdBy}}</td>

                                <td>
                                    <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                        aria-label="Actions">
                                        <a href="/portal/post/details/{{item.post.id}}"
                                            class="btn btn-link text-primary">
                                            <span class="fas fa-pen"></span>
                                        </a>
                                        <a ng-click="preview(item.post)" target="_blank"
                                            class="btn btn-link text-primary">
                                            <span class="fas fa-eye"></span>
                                        </a>

                                        <a ng-click="remove(item.moduleId,item.postId);" class="btn btn-link">
                                            <span class="fas fa-trash-alt text-danger"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="mt-5">
                <div class="row">
                    <div class="col-6">
                        <!-- ngIf: canDrag --><small ng-if="canDrag" class="text-info ng-binding ng-scope"
                            ng-bind="translate('warning_can_not_drag_drop',true, 'Note: Drag Drop only allow when order by priority asc')">Note:
                            Drag Drop only allow when order by priority asc</small><!-- end ngIf: canDrag -->
                    </div>

                    <div class="col-6">
                        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                            ul-class="pagination justify-content-end m-0" a-class="page-link"
                            paging-action="getList(page-1)" scroll-top="true"></paging>
                    </div>
                </div>
            </div>

            <!-- </section> -->
        </div>

    </div>
</div>